<%--
  Created by IntelliJ IDEA.
  User: Mr_C
  Date: 2017/3/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <%--<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">--%>
    <%--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/bootstrap.min.js"></script>

    <link href="${ctx}/js/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/add-on/jplayer.playlist.min.js"></script>

    <style type="text/css">
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }
        .m{ margin-left: auto; margin-right: 100px; width: 100%;height: 400px;margin-top: 100px}
        .video-js{width: 100%}

        #playlist li {
            color: blue;
            text-decoration: underline;
        }
        #playlist li:hover {
            color: black;
            cursor: pointer;
        }
        .apdText{
            font-size: 20px;
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            //加载系统模板
            $.ajax({
                url: '${ctx}/cosplay/getProfessionDetail',
                type: 'POST',
                data:{
                    pro_id:'${pro_id}'
                },
                dataType: 'json',
                success: function(responseText) {
                    //此处加载各种文章信息
                    $("#jumtitle").append("<h1>"+"<br/>"+responseText.pro_name+"</h1>");
                    $("#section-1").append("<p class='apdText'>"+"<br/>"+responseText.pro_name+"</p>");
                    $("#section-2").append("<p class='apdText'>"+"<br/>"+responseText.pro_jobdis+"</p>");
                    $("#section-3").append("<p class='apdText'>"+"<br/>"+responseText.pro_responsibility+"</p>");
                    for(var i = 0;i < responseText.relevant_office_count;i++){
//                        $("#section-4").append("<p data-toggle=\"modal\" data-target=\"#myModal\" onclick='openMapBox("+responseText.relevant_office[i].office_id+")'>"+responseText.relevant_office[i].office_name+"</p>");
                        $("#section-4").append("<p class='apdText'><a href='${ctx}/office/preOfficeDetail?office_id="+responseText.relevant_office[i].office_id+"' target='_blank' >"+"<br/>"+responseText.relevant_office[i].office_name+"</a></p>");
                    }
                    for(var i = 0;i < responseText.flow_detail_count;i++){
                        $("#section-5").append("<p class='apdText'><a href='${ctx}/cosplay/preFlowDetail?flow_id="+responseText.flow_detail[i].flow_id+"&flow_name="+responseText.flow_detail[i].flow_name+"' target='_blank' >"+"<br/>"+responseText.flow_detail[i].flow_name+"</a></p>");
                    }
                }
            });

        });
    </script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="jumbotron" id="jumtitle">
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">岗位名称</a></li>
                <li><a href="#section-2">工作内容</a></li>
                <li><a href="#section-3">岗位职责</a></li>
                <li><a href="#section-4">负责科室</a></li>
                <li><a href="#section-5">学习流程</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1" >岗位名称</h2>
            <hr>
            <h2 id="section-2">工作内容</h2>
            <hr>
            <h2 id="section-3">岗位职责</h2>
            <hr>
            <h2 id="section-4">负责科室</h2>
            <hr>
            <h2 id="section-5">学习流程</h2>
        </div>
    </div>
</div>


</body>
</html>
